<template>
	<view :id="success ? 'appbw' : 'app'">
		<!-- 头部背景 -->
		<view class="oh detail plr30" :class="type == 1 ? 'topBg' : 'bffae65'">
			<!-- 内容 -->
			<view class="wrap df aic mt50">
				<!-- 图片 -->
				<view class="img wh45">
					<image src="/static/clock.png" mode="aspectFit" v-if="type == 1"></image>
					<image src="/static/clock1.png" mode="aspectFit" v-if="type == 2"></image>
				</view>
				<view class="state ml20 f30" :class="{'cw': type == 2}">{{wrap.status_text}}</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="proDesc address area mt30 mlr30 plr25 bw">
			<!-- 商家 -->
			<view class="rows ptb20 f28 bdb1se">
				<view class="col df f1" v-if="type == 1">
					<!-- 商家头像 -->
					<view class="proImg wh40">
						<image :src="wrap.sellData.shop_logo" mode="aspectFill"></image>
					</view>
					<!-- 商家名称 -->
					<view class="txt ml10 c333">{{wrap.sellData.shop_name}}</view>
				</view>
				<view class="col df f1" v-if="type == 2">
					<!-- 商家头像 -->
					<view class="avatar wh40">
						<image :src="wrap.userData.avatar" mode="aspectFill"></image>
					</view>
					<!-- 商家名称 -->
					<view class="txt ml10 c333">{{wrap.userData.nickname}}</view>
				</view>
				<view class="col" v-if="type == 1" @click="callShop">
					<uni-icons type="phone" color="#FF9646"></uni-icons>
					<text class=" cff9646">联系商家</text>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="proInfo df ais ptb35">
				<!-- 商品图片 -->
				<view class="proImg img180">
					<image :src="wrap.goodsData.images[0]" mode="aspectFill" lazy-load></image>
				</view>
				<!-- 商品信息 -->
				<view class="proInfo df dfc dfsb oh ml20 f1">
					<!-- 商品名称 -->
					<view class="title t2hd c333 f32">{{wrap.goodsData.name}}</view>

					<!-- 申请时间 -->
					<view class="time c999 f28">申请时间：{{wrap.goodsData.createtime}}</view>

					<!-- 价格 -->
					<text class="cFF9646 f28">￥{{wrap.goodsData.price}}</text>
				</view>
			</view>
		</view>

		<!-- 订单切换 -->
		<view class="orderDesc area mt30 mlr30 ptb30 plr30 c333 f28" v-if="wrap.status != 1">
			<!-- 商品返利比例 -->
			<view class="rows" v-if="wrap.ratio && wrap.status != 6">
				<view class="col w250">商品返利比例</view>
				<view class="col f1">{{wrap.ratio}}%</view>
			</view>

			<!-- 取消时间 -->
			<view class="rows" v-if="wrap.canceltime">
				<view class="col w250">取消时间</view>
				<view class="col f1">{{wrap.canceltime}}</view>
			</view>

			<!-- 商家确认合作时间 -->
			<view class="rows" v-if="wrap.selltime">
				<view class="col w250">商家确认合作时间</view>
				<view class="col f1">{{wrap.selltime}}</view>
			</view>

			<!-- 用户确认合作时间 -->
			<view class="rows" v-if="wrap.usertime">
				<view class="col w250">用户确认合作时间</view>
				<view class="col f1">{{wrap.usertime}}</view>
			</view>

			<!-- 用户解除合作时间 -->
			<view class="rows" v-if="wrap.user_time">
				<view class="col w250">用户解除合作时间</view>
				<view class="col f1">{{wrap.user_time}}</view>
			</view>

			<!-- 商家解除合作时间 -->
			<view class="rows" v-if="wrap.sell_time">
				<view class="col w250">商家解除合作时间</view>
				<view class="col f1">{{wrap.sell_time}}</view>
			</view>

		</view>

		<!-- 填充 -->
		<view class="fill"></view>

		<!-- 底部 -->
		<view class="footer df dfr ptb20 plr30 bw" v-if="wrap.status == 2 && type == 1">
			<view class="mr30">
				<view class="btn cancel w150" @click.stop="propose()">提出异议</view>
			</view>
			<view>
				<view class="btn prmary w150" @click.stop="each()">确认合作</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer df dfr ptb20 plr30 bw" v-if="wrap.status == 1 && type == 2">
			<view class="btn cancel w200" @click="cancel()">取消合作</view>
			<view class="btn prmary ml20 w200" @click="$refs.fanli.open()">确认合作</view>
		</view>

		<!-- 底部 -->
		<view class="footer df dfr ptb20 plr30 bw" v-if="wrap.status == 2 && type == 2">
			<view class="btn prmary ml20 w200" @click="$refs.fanli.open()">修改返利比例</view>
		</view>

		<!-- 底部 -->
		<view class="footer df dfr ptb20 plr30 bw" v-if="wrap.status == 3">
			<view class="btn prmary ml20 w200" @click="castoff()">解除合作</view>
		</view>

		<!-- 商品返利比例 -->
		<uni-popup ref="fanli" type="center">
			<view class="popMid pt30">
				<!-- 标题 -->
				<view class="title c000 f30">商品返利比例</view>
				<!-- 编辑 -->
				<label class="edit rows w70p mauto mt50 pb10 bdb1se">
					<view class="img wh30">
						<image src="/static/1706.png" mode="aspectFit"></image>
					</view>
					<view class="f1">
						<input type="text" v-model="backVal" />
					</view>
				</label>
				<!-- 按钮 -->
				<view class="fnArea rows mt50 lh100 bdt1sE f34">
					<view class="f1 bdr1se c999" @click="$refs.fanli.close()">取消</view>
					<view class="f1" @click="confirm">确定</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>
<script>
	// 定义全局变量that
	var that;
	export default {
		// 页面变量
		data() {
			return {
				// 内容
				wrap: {},
				// 订单id
				id: '',
				// 退款理由
				backVal: '',
				// 提交成功
				success: false,
				// 类型 1用户 2商家
				type: '',
			}
		},

		// 页面加载完成后
		onLoad(e) {
			that = this;

			// 判断有无id
			if (e.id) {
				// 赋值id
				that.id = e.id;
			}

			// 判断类型
			that.type = e.type ? e.type : 1;
		},

		// 页面显示
		onShow() {
			// 根据类型判断改变主题颜色
			if (that.type == 1) {
				// 设置导航栏颜色
				uni.setNavigationBarColor({
					frontColor: "#000000",
					backgroundColor: '#FFF7CC',
				})
			} else {
				// 设置导航栏颜色
				uni.setNavigationBarColor({
					frontColor: "#FFFFFF",
					backgroundColor: '#FFAD67',
				})
			}

			// 订单详情
			that.detail();
		},

		// 方法集
		methods: {
			// 提出异议
			propose() {
				// 弹窗提示
				that.alert({
					value: '确认提出异议',
					success(rs) {
						// 点击确定
						if (rs.confirm) {
							// 新建对象
							var obj = {
								// 订单状态
								status: 1,
								// 异议状态
								state: 2,
							}

							// 改变状态
							that.util.changeStatus(obj, that);
						}
					},
				});
			},

			// 合作
			confirm() {
				// 新建对象
				var obj = {
					status: 3,
				}

				// 改变状态
				that.util.changeStatus(obj, that);
			},

			// 解除合作
			castoff() {
				// 弹窗提示
				that.alert({
					value: that.type == 1 ? '解除之后则您的所有下级人员或将无法购买该商品，确认解除合作吗？' : '解除之后则该用户的所有下级人员或将无法购买该商品，确认要解除合作吗？',
					success(rs) {
						// 点击确定
						if (rs.confirm) {
							// 新建对象
							var obj = {
								// 订单状态
								status: that.type == 1 ? 5 : 4,
							}

							// 1用户 2商家
							if (that.type == 1) {
								obj.user_time = Date.parse(new Date()) / 1000;
							} else if (that.type == 2) {
								obj.sell_time = Date.parse(new Date()) / 1000;
							}

							// 改变状态
							that.util.changeStatus(obj, that);
						};
					},
				});
			},

			// 用户确认合作
			each() {
				// 新建对象
				var obj = {
					status: 3,
				}

				// 改变状态
				that.util.changeStatus(obj, that);
			},

			// 确定
			confirm() {
				// 判断是否填写为空
				if (!that.backVal) {
					// 弹窗提示
					that.alert('请输入返利比例');
					return;
				}

				// 新建对象
				var obj = {
					// 订单状态
					status: 2,
					// 返利比例
					ratio: that.backVal,
					// 异议状态
					state: 1,
				};

				// 关闭弹窗
				that.$refs.fanli.close();

				// 改变状态
				that.util.changeStatus(obj, that, () => {
					// 赋值返佣比例
					that.wrap.ratio = that.backVal;

					// 重新赋值刷新页面
					that.wrap = Object.assign({}, that.wrap);
				});
			},

			// 取消合作
			cancel() {
				// 弹窗提示
				that.alert({
					value: '确认取消订单？',
					success(rs) {
						// 点击确定
						if (rs.confirm) {
							// 新建对象
							var obj = {
								status: 6,
							};

							// 改变状态
							that.util.changeStatus(obj, that);
						}
					}
				});
			},

			// 订单详情
			detail() {
				// 请求接口 
				that.request({
					url: '',
					// 上传数据
					data: {
						// 推销
						table: 'promote',
						// 订单id
						id: that.id,
					},
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 赋值内容
							that.wrap = rs.data;

							// 更改标题
							uni.setNavigationBarTitle({
								title: that.wrap.status_text,
							})
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 联系商家
			callShop() {
				// 拨打电话
				uni.makePhoneCall({
					phoneNumber: that.wrap.sellData.shop_kfmobile,
				})
			},
		},
	};
</script>
<style>
	/* 上背景 */
	.detail {
		height: 250rpx;
	}

	/* 商品简息 */
	.address {
		margin-top: -100rpx;
	}

	/* 订单简介 */
	.orderDesc {
		line-height: 70rpx;
	}

	/* 每行第一列 */
	.rows .col:nth-child(1) {
		color: #999;
	}
</style>
